<template>
    <div class="container">
        <div class="left">
            <span>等级：</span>
        </div>
        <ul class="right" >
            <li :class="currentLevel?'':'active'" @click="AllhandleLiClick" >全部</li>
            <li :class="currentLevel === item.value?'active':''" @click="handleLiClick(item)" v-for="(item,index) in hospitalLevel " :key="item.id" >{{ item.name }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
    import {getHospitalLevelAndReginApi} from '@/api/home/index.ts'
    import { onMounted, ref } from 'vue';

    import type {HospitalLevel} from '@/api/home/type.ts'

    const hospitalLevel = ref<HospitalLevel[]>([]) //医院等级的列表
    const currentLevel = ref<string>('')

    onMounted(() => {
        getHostpitalLevel()
    })

    // 点击全部时触发的事件
    const AllhandleLiClick = () => {
        currentLevel.value = ''        
    }

    // 点击等级时触发的点击事件
    const handleLiClick = (item:HospitalLevel) => {
        currentLevel.value = item.value
    }

    // 得到医院等级的方法
    const getHostpitalLevel = async() => {
       const res = await getHospitalLevelAndReginApi('Hostype')
       hospitalLevel.value = res.data
       
    }
</script>

<style lang="scss" scoped>
    .container {
        margin-top: 10px;
        display: flex;
        color:#7f7f7f;
        .left {
            width: 55px;
        }
        .right {
            display: flex;
            li {
                margin-right: 10px;
                &:hover {
                    cursor: pointer;
                    color:#55a6fe;
                }
            }
            .active {
                color:#55a6fe;
            }
        }
    }
</style>